<template>
  <div class="upload-file-button">
    <input ref="fileInput" class="upload-file-input" type="file" @change="fileChange">
    <el-button type="primary" :size="size" @click="toSelectFile">{{label}}</el-button>
  </div>
</template>

<script>
  export default {
    props: {
      label: {
        type: String,
        default: '上传文件'
      },
      size: String
    },

    data() {
      return {};
    },

    methods:{
      toSelectFile(){
        this.$refs['fileInput'].click();
      },

      fileChange(){
        let file = this.$refs['fileInput'].files[0];
        this.$emit('change',file);
      }
    }
  };

</script>

<style lang="scss" scoped>
  .upload-file-button {
    position: relative;
    .upload-file-input{
      position: absolute;
      top: -999px;
      left: -999px;
    }
  }

</style>
